// 顶部导航栏组件
Vue.component('top-bar', {
	template: `<div class="top-bar" :class="'player-' + currentPlayerIndex">
			<div class="player p0">{{players[0].name}}</div>
			<div class="turn-counter">
				<img class="arrow" src="svg/turn.svg" />
				<div class="turn">Turn {{turn}}</div>
			</div>
			<div class="player p1">{{players[1].name}}</div>
		</div>`,
	props: ['players', 'currentPlayerIndex', 'turn'],
})

// 卡牌组件
Vue.component('card', {
	template: `<div class="card" :class="'type-' + def.type" @click="play">
    <div class="title">{{ def.title }}</div>
    <img class="separator" src="svg/card-separator.svg" />
    <div class="description"><div v-html="def.description"></div></div>
    <div class="note" v-if="def.note"><div v-html="def.note"></div></div>
  </div>`,
	props: ['def'],
	methods: {
		play() {
			this.$emit('play')
		},
	},
})

// 手牌组件
Vue.component('hand', {
	template: `<div class="hand">
    <div class="wrapper">
      <transition-group name="card" tag="div" class="cards" @after-leave="handleLeaveTransitionEnd">
        <card v-for="card of cards" :key="card.uid" :def="card.def" @play="handlePlay(card)" />
      </transition-group>
    </div>
  </div>`,
	props: ['cards'],
	methods: {
		handlePlay(card) {
			this.$emit('card-play', card)
		},
		// 等到卡牌离开动画结束之后，再执行后续的操作
		handleLeaveTransitionEnd() {
			this.$emit('card-leave-end')
		},
	},
})

// 浮层组件 
/*
overlay-content-player-turn 显 示 游 戏 回 合 开 始 的 相 关 内 容； 
overlay-content-last-play 显 示 对 手 上 一 回 合 的 出 牌 信 息； 
overlay-content-game-over 显 示 游 戏 结 束 的 信 息。
*/
Vue.component('overlay', {
	template: `<div class="overlay" @click="handleClick">
		<div class="content">
			<slot />
		</div>
	</div>`,
	methods: {
		handleClick() {
			this.$emit('close');
		},
	}
})

/*
player-turn 浮 层 第 一 个 浮 层 将 根 据 是 否 跳 过 回 合， 向 当 前 玩 家 显 示 两 条 不 同 的 信 息。 
player prop 将 接 收 当 前 玩 家 的 信 息， 方 便 我 们 访 问 玩 家 数 据。 
此 处 将 搭 配 使 用 v-if 和 v-else 指 令， 以 及 刚 刚 添 加 的 玩 家 skipTurn 属 性：
*/
Vue.component('overlay-content-player-turn', {
	template: `<div>
    <div class="big" v-if="player.skipTurn">{{ player.name }},<br>your turn is skipped!</div>
    <div class="big" v-else>{{ player.name }},<br>your turn has come!</div>
    <div>Tap to continue</div>
  </div>`,
	props: ['player'],
})


// last-play 浮层,显示上一名玩家出牌信息
Vue.component('overlay-content-last-play', {
	template: `<div>
    <div v-if="opponent.skippedTurn">{{ opponent.name }} turn was skipped!</div>
    <template v-else>
      <div>{{ opponent.name }} just played:</div>
      <card :def="lastPlayedCard" />
    </template>
  </div>`,
	props: ['opponent'],
	computed:{
		lastPlayedCard() {
			return getLastPlayedCard(this.opponent);
		}
	}
})

// game over 浮层
Vue.component('overlay-content-game-over', {
  template: `<div>
    <div class="big">Game Over</div>
    <player-result v-for="player in players" :player="player" />
  </div>`,
  props: ['players'],
})

// 游戏结果
Vue.component('player-result', {
  template: `<div class="player-result" :class="result">
    <span class="name">{{ player.name }}</span> is
    <span class="result">{{ result }}</span>
  </div>`,
  props: ['player'],
  computed: {
    result () {
      return this.player.dead ? 'defeated' : 'victorious'
    },
  },
})
